<template>
  <PageListContainer class="notice-list">
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="公告类型">
          <el-select v-model="state.params.type" placeholder="请选择公告类型">
            <el-option v-for="(o, i) in typeOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送对象">
          <el-select v-model="state.params.send_object" placeholder="请选择发送对象">
            <el-option v-for="(o, i) in sendObjectOptions" :key="i" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="公告标题">
          <el-input v-model="state.params.title" clearable placeholder="请输入公告标题" />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-toolbar>
        <el-button type="primary" @click="onClickAdd">新建公告</el-button>
      </k-toolbar>
      <k-table v-bind="tableState" v-on="tableEvent">
        <template #actions="s">
          <el-link type="primary" @click="onClickEdit(s.row)">编辑</el-link>
          <el-link type="danger" @click="onClickDel(s.row)">删除</el-link>
          <el-link type="primary" @click="onClickView(s.row)">查看</el-link>
        </template>
      </k-table>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { del } from '@/api/crm-content/notice';
import { typeOptions, sendObjectOptions, useTableList } from './hooks/use-table';
import { useDel } from '@crud/index';

defineOptions({ name: 'DyjNoticeList' });
const router = useRouter();
const { state, tableState, tableEvent, ...methods } = useTableList();

const { onClickDel } = useDel({
  confirm: { title: '删除', message: '确定删除该公告？' },
  del: async (data: any) => {
    await del(data.id);
    methods.getList();
  }
});

// 新增编辑
const onClickAdd = () => {
  router.push({ name: 'DyjNoticeAdd', query: { type: 'create', id: 0 } });

};
const onClickEdit = (row: any) => {
  router.push({ name: 'DyjNoticeAdd', query: { type: 'edit', id: row.id } });
};
const onClickView = (row: any) => {
  router.push({ name: 'DyjNoticeAdd', query: { type: 'check', id: row.id } });
};
</script>
